<template>
	<div class="swiper-container">
  		<div class="swiper-wrapper">
			<slot></slot>
  		</div>
  		<!-- 如果需要分页器 -->
  		<div class="swiper-pagination-box">
  			<div class="swiper-pagination"></div>
  		</div>
  		<!-- 如果需要导航按钮 -->
<!--   		<div class="swiper-button-prev"></div>
  		<div class="swiper-button-next"></div> -->
	</div>
</template>
<style lang="less" scoped>
	.swiper-pagination-box{
		position: absolute;
		bottom: 10px;
		left: 0;
		width: 100%;
		height: 20px;
		display: flex;
		justify-content: center;
		.swiper-pagination-fraction{
			position: initial;
			width: initial;
		}
	}
	.swiper-pagination-fraction{
		height:20px;
		line-height:20px;
		width:initial;
		padding: 0 15px;
		border-radius: 1rem;
		background: rgba(0,0,0,0.2);
		color:#fff;
		.swiper-pagination-fraction{
			position: none;
		}
	}
	.swiper-button-next, .swiper-button-prev{
		width:20px;
		height:40px;
		background-size: cover;
	}
	.swiper-slide{
		height: 210px;
		overflow: hidden;
		text-align: center;
		img{
			width:100%;
		}
	}
</style>